<template>
    <div>
        <div id="one">
            <el-button type="primary" @click="dialogFormVisible = true" id="button1">添加标签</el-button>
            <el-dialog title="新增标签" :visible.sync="dialogFormVisible">
                <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="标签名" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="form.name" autocomplete="off" style="width:580px"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" :label-width="formLabelWidth" prop="number">
                        <el-input v-model.number="form.number" autocomplete="off" style="width:580px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false, addTags(form)" :disabled='disabled'>确 定
                    </el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改标签信息" :visible.sync="dialogFormEditVisible">
                <el-form :model="formEdit" ref="formEdit">
                    <el-form-item label="标签名" :label-width="formLabelWidth">
                        <el-input v-model="formEdit.name" autocomplete="off" style="width:580px"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" :label-width="formLabelWidth">
                        <el-input v-model.number="formEdit.number" autocomplete="off" style="width:580px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormEditVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormEditVisible = false, handleEdit(formEdit)">确 定
                    </el-button>
                </div>
            </el-dialog>


            <div style="margin-top: 15px; display: inline-block;" class="two">
                <el-form :inline="true" :model="formInline" class="demo-form-inline,three">
                    <el-form-item label="类型查询" style="margin:0">
                        <el-input v-model="formInline.name" placeholder="查询全部"></el-input>
                    </el-form-item>
                    <el-form-item style="margin:0">
                        <el-button type="primary" @click="checkTag(formInline)">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div>
            <template>
                <el-table :data="tags" style="width: 100%" >
                    <el-table-column prop="name" label="标签名" width="380">
                    </el-table-column>
                    <el-table-column prop="number" label="帖子数量" width="380">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                @click="handleEditReverse(scope.$index, scope.row), dialogFormEditVisible = true">编辑
                            </el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div>
                <el-pagination layout="prev, pager, next" :total="total" :current-page="page" :page-size="pagesize"
                    :pager-count="pagerCount" @current-change="handleCurrentChange" :disabled="disabled">
                </el-pagination>
            </div>
        </div>
        <div id="echart" style="width:500px;height:500px"></div>
    </div>
</template>

<script>
import { mapState } from "vuex";
// import { getAllTags } from "@/services/tagsService";
export default {
    data() {
        return {
            formInline: {
                name: '',
            },
            formEdit: {
                name: '',
                number: '',
                id: ''
            },
            form: {
                name: '',
                number: '',
            },
            rules: {
                name: [
                    { required: true, message: '标签名不能为空', trigger: 'blur' },
                ],
                number: [
                    { required: true, message: '数量不能为空', trigger: 'blur' },
                    { type: 'number', message: '数量必须为数值', trigger: 'blur' },
                ]
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogFormEditVisible: false,
            formLabelWidth: '120px',
            msg: '',
            number: [],
            tagType: [],
            tag: [],
            loading: false,
            page: 1,
            pagesize: 10,
            disabled: false,
            total: null,
            pagerCount: 7,
        }
    },
    mounted() {
        this.drawLine();
    },
    created() {

        this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:this.pagesize}).then((res)=>{
            console.log(this.page,this.pagesize);
            console.log(res);
            this.total = res.total
        })
    },
    computed: {
        ...mapState("tagsStore", ["tags"]),
    },
    methods: {
        handleCurrentChange(page) {
            console.log(page);
            this.page = page
            let obj = {
                page:this.page,
                pagesize:this.pagesize
            }
            this.$store.dispatch("tagsStore/fetchTagsDate",obj)
        },
        validate() {
            this.$refs['form'].validate((valid) => {
                console.log(valid); // true/false
                this.disabled = false
            });
        },
        //新增
        addTags(form) {
            console.log(form);
            let flag = this.tag.filter(item => {
                if (item.name === form.name) {
                    return item
                }
                // console.log(flag);
            })
            console.log(flag);
            if (flag.length) {
                this.form = {
                    name: '',
                    number: '',
                }
                this.$message({
                    showClose: true,
                    message: '已有该标签',
                    type: 'error'
                });
            } else {
                console.log(form.name);
                this.$store.dispatch("tagsStore/addTagsData", form)
                this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:this.pagesize})
                this.form = {
                    name: '',
                    number: '',
                }
                this.$message({
                    showClose: true,
                    message: '新增成功',
                    type: 'success'
                });
            }

        },
        //查询
        checkTag(formInline) {
            // console.log(formInline);
            // this.$store.dispatch("tagsStore/fetchTagsType", formInline)
            if (formInline && formInline.name !=="") {
                console.log(formInline);
                let res = this.tag.filter(tag => {
                    return !formInline.name || tag.name.toLowerCase().includes(formInline.name.toLowerCase()) || tag.number.toString().toLowerCase().includes(formInline.name.toLowerCase());
                })
                this.$store.commit("tagsStore/setTags", res)
                this.disabled = true
            } else {
                this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:this.pagesize})
                this.disabled = false
            }
        },
        //修改信息回填
        handleEditReverse(index, row) {
            console.log(index, row);
            this.formEdit = {
                name: row.name,
                number: row.number,
                id: row._id
            }
        },
        //修改
        handleEdit(formEdit) {
            let flag = this.tag.filter(item => {
                if (item.name === formEdit.name) {
                    return item
                }
                // console.log(flag);
            })
            if (flag.length) {
                this.$message({
                    showClose: true,
                    message: '已有该标签',
                    type: 'error'
                });
            } else {
                this.$store.dispatch("tagsStore/editTagsData", formEdit)
                this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:this.pagesize})
                this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                });
            }

        },
        //删除
        handleDelete(index, row) {
            this.$store.dispatch("tagsStore/deleteTagsData", row._id)
            this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:this.pagesize})
            this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
            });

        },
        drawLine() {
            this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:9999999}).then(res => {
                console.log(res);
                this.tag = res.rows
                this.number = this.tag.map(item => item.number)
                this.tagType = this.tag.map(item => item.name)
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('echart'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '帖子分类' },
                    tooltip: {},
                    xAxis: {
                        data: this.tagType
                    },
                    yAxis: {},
                    series: [{
                        name: '帖子数量',
                        type: 'bar',
                        data: this.number
                    }]
                });
            })
            this.$store.dispatch("tagsStore/fetchTagsDate",{page:this.page,pagesize:this.pagesize})
        }
    }
}
</script>

<style scoped>
#button1 {
    margin-right: 20px;
}

#one {
    text-align: left;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.two {
    display: flex;
    align-items: center;
    margin: 0 !important;
}

.three {
    display: flex;
    align-items: center;
}
</style>